<template>


    <!--默认收藏-->
    <view v-for="(item,index) in renderData.list" class="script-item script-item-small">

      <view @click="handleJump(item)" class="script-item-box fx-row-b">
        <view class="script-item-box-img main-bg"
              :style="{'background-image': 'url('+ item.script?.cover +')'}"
        >
        </view>
        <view class="script-item-box-content fx-col-b">
          <view class="script-item-box-content-title fx-row-s">
            <text class="title-name com-overflow">{{ item.script?.title }}</text>
            <text class="title-count">{{ filterRate(item.script?.rate) }}</text>
            <uv-tag v-if="props?.isBtn" class="ml20" mode="light" size="mini" shape="circle" type="info" text="取消收藏" clear
                    :color="color.colorTextB" :border-color="color.colorTextD" @click="handleCancelCollect(item,index)"
            />
          </view>
          <view class="script-item-box-content-tag fx-row-s com-overflow">
            <uv-tag v-if="item.script?.type" class="mr10" size="mini" mode="light" shape="circle" type="info" :text="item.script?.type"
                     clear :color="color.colorTextB" :border-color="color.colorTextD"
            />
            <uv-tag v-for="(itemChild,indexChild) in item.script?.age" class="mr10" size="mini" mode="light" shape="circle" type="info" :text="itemChild"
                    clear :color="color.colorTextB" :border-color="color.colorTextD"
            />
            <uv-tag v-if="item.script?.ageRating" class="mr10" size="mini" mode="light" shape="circle" type="info" :text="item.script?.ageRating"
                    clear :color="color.colorTextB" :border-color="color.colorTextD"
            />
            <uv-tag v-show="indexChild > 2 ? false:true" v-for="(itemChild,indexChild) in item.script?.tags" class="mr10" size="mini" mode="light" shape="circle" type="info" :text="itemChild"
                    clear :color="color.colorTextB" :border-color="color.colorTextD"
            />
          </view>
          <view class="script-item-box-content-author fx-row-b">
            <view class="fx-row-s" style="align-items: end;">
              <uv-image
                :width = "width"
                :height = "height"
                shape="circle"
                :src="item.script.user?.avatar"
              ></uv-image>
              <view class="script-item-box-content-author-text ml15"> 作者：{{ item.script.user?.nickname }}</view>
            </view>
            <view>
              已测：{{item.scriptCount}}场
            </view>

          </view>
        </view>
      </view>

      <view v-if="item.script?.isParting" class="script-item-label fx-row-b">
        <view class="script-item-label-arrow"></view>
        <text class="script-item-label-text">正在约车</text>
      </view>

    </view>




</template>
<script setup>
import { ref,reactive,watch,computed} from 'vue'
import { header,color } from '@/enums/constants';
import { ossImage,jump } from '@/utils/index';
import { onShow } from "@dcloudio/uni-app";
import playApi from "@/apis/play";
const {width , height} = {...header.little};
const renderData = reactive({
  list:[],
  demo:'http://t13.baidu.com/it/u=1887934876,2800375899&fm=224&app=112&f=JPEG?w=333&h=500'
})
const props = defineProps({
  list:{
    type:Array,
    default:[],
  },
  isType:{
    type:Boolean,
    default:false,
  },
  isCollect:{
    type:Boolean,
    default:false
  },
  isUser:{
    type:Boolean,
    default:false
  },
  isDetail:{
    type:Boolean,
    default:false
  },
  fun:{
    type:Function
  },
  isBtn:{
    type:Boolean,
    default:false
  },
});

//统一数据结构
const listReset = ()=>{
  if(props.isCollect){
    let arr = props.list.map((item,index)=>{
      item.Script.rate = typeof item.rate == 'number' ? item.rate : 0;
      return {
        script:item.Script
      }
    })
    renderData.list = arr;
    handleGetScriptCount(arr);
  }
  if(props.isUser){
    let arr = props.list.map((item,index)=>{
      item.ScriptBasic.rate = typeof item.ScriptExt.rate == 'number' ? item.ScriptExt.rate : 0;
      return {
        script:item.ScriptBasic
      }
    })
    renderData.list = arr;
    handleGetScriptCount(arr);
  }
  if(props.isDetail){
    let arr = props.list.map((item,index)=>{
      return {
        script:item
      }
    })
    renderData.list = arr;
    handleGetScriptCount(arr);
  }
}

//获取场次scriptIds
const handleGetScriptCount = (arr)=>{
  if(arr?.length<=0){return}
  let strArr = arr.map((item)=>{
    return item.script.id
  })
  let para = {
    scriptIds:strArr.join(',')
  }
  playApi.getScriptCount(para).then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      res.data.forEach((item,index)=>{
        renderData.list[index].scriptCount = item;
      })
    }
  })
}

//处理评分
const filterRate = computed(()=>{
  return (rate)=>{
    if(rate){
      return rate.toFixed(1)
    }else{
      return ''
    }
  }
})

watch(()=>props.list,()=>{
  listReset();
})

onShow(()=>{
  //listReset();
})

const handleJump = (item)=>{
  if(item.script?.category=='SAME_CITY'){
    jump('/pages/play/scriptDetail2?id='+ item.script?.id || "" , true)
  }else{
    jump('/pages/play/scriptDetail?id='+ item.script?.id || "" , true)
  }
}
//取消收藏
const handleCancelCollect = (item,index)=>{
  if(props.fun){
    props.fun(item,index);
  }
}

</script>

<style lang="scss" scoped>
</style>
